<script setup lang="ts">
import {UserOutlined, ChromeOutlined, HistoryOutlined} from '@ant-design/icons-vue'
import {ref} from "vue";
import _ from 'lodash';
import {timeAgoConvert} from "@/util/timeUtil";
import Collection from '@/components/collection/index.vue'
import Praise from '@/components/praise/index.vue'
import {router} from "@/router";
import {PagePath} from "@/util/commonUtil";
import { message } from 'ant-design-vue';

defineProps({
  item: {
    type: Object,
    required: true
  },
});

const typeList = ref(['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'])

function goToSortList(uid: any) {
  router.push({
    path: PagePath.ResultsPath,
    query: {sortUid: uid}
  })
}

function goToTagList(uid: any) {
  router.push({
    path: PagePath.ResultsPath,
    query: {tagUid: uid}
  })
}

function getUserCenter(item: any) {
  // 判断是后台添加，还是前台投稿
  if (item.articleSource == 0) {
    let routeData = router.resolve({
      path: PagePath.UserCenterPath,
      query: {adminUid: item.adminUid}
    })
    window.open(routeData.href, '_blank')
  }else {
    let routeData = router.resolve({
      path: PagePath.UserCenterPath,
      query: {userUid: item.userUid}
    })
    window.open(routeData.href, '_blank')
  }
}

function clickTime(item:any){
  message.info('本文写作于'+item)
}
</script>

<template>
  <section class="homeCardABottom overflow-hidden">
    <div class="homeCardABottomMain flex flex-row items-center gap-2">
      <!-- Avatar -->
      <div class="avatar relative inline-flex hover:scale-105" @click="getUserCenter(item)">
        <a-avatar v-if="item.user.photoUrl"
                  class="h-9 w-9"
                  :class="item.user.userTag > 0 ?'vipColor':''"
                  :src="item.user.photoUrl"></a-avatar>
        <a-avatar v-else class="h-9 w-9">
          <template #icon>
            <UserOutlined/>
          </template>
        </a-avatar>
        <sub class="badgeSup h-4 w-4 absolute bottom-0 -right-1">
          <img src="@/assets/vip/vip.svg" class="h-full w-full" alt="vipBadge">
        </sub>
      </div>
      <!-- NickName -->
      <div class="nickName max-w-12" @click="getUserCenter(item)">
        <span class="text-slate-400 cursor-pointer text-[13px] leading-[1.5] hover:text-orange-500"
              :class="'lv'+ item.user.userLevel">
          {{ item.user.nickName }}
        </span>
      </div>
      <!-- 文章分类 -->
      <div class="postSort">
        <a-tag :color="_.sample(typeList)" @click="goToSortList(item.blogSort.uid)">{{ item.blogSort.sortName }}</a-tag>
      </div>
      <!-- 文章标签 -->
      <div class="postTag lg:block hidden">
        <template v-for="(tag) in item.tagList" :key="tag.uid">
          <a-tag :color="_.sample(typeList)" @click="goToTagList(tag.uid)">{{ tag.content }}</a-tag>
        </template>
      </div>
      <!-- 文章浏览量 -->
      <div class="postView flex gap-0.5 items-center iconColor">
        <ChromeOutlined/>
        <span>{{ item.clickCount }}</span>
      </div>
      <!-- 文章发布时间 -->
      <div class="postTime flex gap-0.5 items-center iconColor" @click="clickTime(timeAgoConvert(item.createTime))">
        <HistoryOutlined/>
        <span>{{ timeAgoConvert(item.createTime) }}</span>
      </div>
      <!-- 文章收藏 -->
      <div class="homeCollection iconColor">
        <Collection
            v-if="item.collectInfo"
            :bizUid="item.uid"
            :collectType="'1'"
            :collectCountValue="item.collectInfo.collectCount"
            :isCollectValue="item.collectInfo.isCollect"
        />
      </div>
      <!-- 文章点赞或点踩 -->
      <div class="homePraise">
        <Praise
            v-if="item.praiseInfo"
            :isPraiseValue="item.praiseInfo.isPraise"
            :isTreadValue="item.praiseInfo.isTread"
            :praiseCountValue="item.praiseInfo.praiseCount"
            :treadCountValue="item.praiseInfo.treadCount"
            :bizUid="item.uid"
            :resourceType="'1'"/>
      </div>
    </div>
  </section>
</template>

<style scoped lang="less">
.vipColor {
  border: 1.5px solid gold;
}
</style>
